<template>
  <div>
    <a-spin :spinning="loading">
      <div class="list" v-if="value.length>0">
        <div class="item" v-for="(item,index) in value" :key="index">
          <div class="item-left">
            <div class="cover">
              <img v-if="item.template" :src="item.template&&item.template.cover" alt />
              <div class="edit">
                <!-- <img src="~@/assets/img/wechats.jpg" alt class="qrcode" /> -->
                <vue-qr :text="item.qrUrl" :size="100" :margin="0" class="qrcode"></vue-qr>
              </div>
            </div>
          </div>
          <div class="item-right">
            <div class="detail">
              <div class="title">
                <span v-if="item.isEnd<=nowDay">
                  <a-tag color="#999">已结束</a-tag>
                  <span class="text">{{item.activity_title}}</span>
                </span>
                <span v-else>
                  <a-tag color="#3BBDAA" v-if="item.is_release==1">进行中</a-tag>
                  <a-tag color="#2db7f5" v-else>未发布</a-tag>
                  <span class="text">{{item.activity_title}}</span>
                </span>

              </div>

              <div class="operate">
                <!-- 已发布 进行中-->
                <div v-if="item.is_release ==1||item.end_time<=nowDay">
                  <a-tooltip>
                    <template slot="title">家长端可见</template>
                    <a-icon
                      class="ml16"
                      style="color:#bfbfbf;"
                      @click="showParentVisible(item)"
                      :component="visibleIcon"
                    ></a-icon>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">二维码</template>
                    <a-icon
                      class="ml16"
                      style="color:#bfbfbf;"
                      @click="showWxCodeVisible(item)"
                      :component="erweimaIcon"
                    ></a-icon>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">海报</template>
                    <a-icon
                      class="ml16"
                      style="color:#bfbfbf;"
                      @click="showPosterVisible(item)"
                      :component="haibaoIcon"
                    ></a-icon>
                  </a-tooltip>
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      <a-icon type="ellipsis" class="ml16" />
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="editActivity(item)">编辑</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click="publishOrDel(item,'del')">删除</a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
                <!-- 未发布 -->
                <div v-else>
                  <a-tooltip>
                    <template slot="title">编辑</template>
                    <a-icon type="edit" class="ml16" @click="editActivity(item)" />
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">删除</template>
                    <a-icon type="delete" class="ml16" @click="publishOrDel(item,'del')" />
                  </a-tooltip>
                </div>
              </div>
            </div>
            <div class="tags">
              <span v-if="item.template&&item.template.cate">
                类型：
                <span>{{cateObj[item.template.cate]}}</span>
              </span>
              <span v-if="item.template&&item.template.scenes">
                场景：
                <span v-for="(val,k) in item.template.scenes" :key="k">
                  {{spaceObj[val]}}
                  <span v-if="k<item.template.scenes.length-1">，</span>
                </span>
              </span>
            </div>
            <div class="part-two">
              <div class="time">
                <div v-if="item.is_release==2">发布时间：-</div>
                <div v-else>发布时间：{{item.created_at}}</div>
                <div>活动时间：{{item.start_time}}至{{item.end_time}}</div>
              </div>
              <!-- 已发布 进行中-->
              <div class="data" v-if="item.is_release == 1||item.end_time<=nowDay">
                <div class="line"></div>
                <div class="data-item">
                  <div class="number">{{item.forward_number}}</div>
                  <div class="label">转发数</div>
                </div>
                <div class="data-item">
                  <div class="number">{{item.views_number}}</div>
                  <div class="label">浏览数</div>
                </div>
                <div v-if="item.cate=='vote'">
                    <div
                      class="data-item signUpBtn"
                      v-if="item.amount>0"
                      @click="showSignUpVisible(item)"
                    >
                    <div class="number">{{item.amount}}</div>
                    <div class="label">投票数</div>
                  </div>
                  <div class="data-item" v-else>
                    <div class="number">0</div>
                    <div class="label">投票数</div>
                  </div>
                </div>
                  <div v-else>
                    <div
                      class="data-item signUpBtn"
                      v-if="item.student&&item.student.length>0"
                      @click="showSignUpVisible(item)"
                    >
                    <div class="number">{{item.student&&item.student.length}}</div>
                    <div class="label">报名数</div>
                  </div>

                  <div class="data-item" v-else>
                    <div class="number">0</div>
                    <div class="label">报名数</div>
                  </div>
                </div>
                
                <div
                  class="data-item signUpBtn"
                  @click="jump(item)"
                >
                  <div class="number">
                    <a-icon type="bar-chart" style="font-size: 18px;color: #ff8534;" />
                  </div>
                  <div class="label">数据分析</div>
                </div>
              </div>
              <!-- 未发布 -->
              <div v-else style="margin-left:auto;margin-top:20px;">
                <a-button type="primary" @click="publishOrDel(item,'publish')">发布活动</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <a-empty :image="simpleImage" />
      </div>
      <div class="box-footer">
        <span v-if="pageData&&pageData.pagination">共{{pageData.pagination.total}}条数据</span>
        <div>
          <a-pagination
            v-if="pageData&&pageData.pagination"
            v-model="nowPage"
            :total="pageData.pagination.total"
            @change="changePage"
          />
        </div>
      </div>
    </a-spin>
    <!-- 家长端设置 -->
    <a-modal
      title="家长端设置"
      :visible="parentVisible"
      :footer="null"
      @cancel="parentCancel"
      :width="550"
    >
      <a-spin :spinning="parentVisibleModelLoading">
        <div class="parent-box">
          <div class="parent-left">
            <div style="margin-bottom:10px;">家长端【服务-机构活动】示例：</div>
            <div>
              <img
                :src="switchStatus?lookImgUrl:NoLookImgUrl"
                alt
                style="width: 200px;height: 356px;"
              />
              <!-- switchStatus?imgurl:imgurl1 -->
            </div>
          </div>
          <div class="parent-right">
            <a-switch
              v-model="switchStatus"
              style="margin-right:5px;"
              @change="changeParendCanSee"
            />家长端可见
          </div>
        </div>
      </a-spin>
    </a-modal>
    <a-modal
      title="海报"
      :visible="posterVisible"
      :footer="null"
      @cancel="posterVisible = false"
      :width="550"
      :bodyStyle="{padding:'15px 0',textAlign:'center',maxHeight:'600px',overflowY:'auto'}"
    >
      <img :src="postUrl" style="box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);" alt="海报" />
    </a-modal>
    <a-modal
      title="微信二维码"
      :visible="wxCodeVisible"
      :footer="null"
      @cancel="wxCodeVisible = false"
      :width="600"
      :bodyStyle="{maxHeight:'600px',overflowY:'auto'}"
    >
      <div>您可直接微信扫描二维码分享推广，也可以保存到本地用于其他宣传品的设计。</div>
      <div style="text-align:center;">
        <!-- <img :src="" alt="微信二维码" /> -->
        <vue-qr :text="wxQrcode" :size="170" :margin="20" class="qrcode"></vue-qr>
        <div><a class="btn_1" v-bind:data-clipboard-text="wxQrcode" @click="copy1">{{wxQrcode}}</a></div>
      </div>
    </a-modal>
    <sign-up-table ref="signUp"></sign-up-table>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import vueQr from 'vue-qr'
import Clipboard from 'clipboard'
import { activityList, publishActivity, delActivity, parentCanSee, getPoster } from '@/api/activity'
import moment from 'moment'
import signUpTable from './components/signUpTable'
import { STable } from '@/components'
import { erweimaIcon, haibaoIcon, visibleIcon } from '@/core/icons'
import { Empty } from 'ant-design-vue'
import es from 'ant-design-vue/es'
export default {
  components: {
    vueQr,
    STable,
    signUpTable,
    Empty
  },
  data() {
    return {
      erweimaIcon,
      haibaoIcon,
      visibleIcon,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      cateObj: {
        chains: '群接龙',
        group: '团购',
        bargain: '砍价',
        flyers: '微传单',
        lottery: '抽奖',
        vote: '投票',
      },
      spaceObj: {
        recommend: '当月推荐',
        hot: '热门活动',
        autumn: '秋招',
        summer: '夏招',
        experience: '体验课',
        renew: '续班',
        epidemic: '抗疫',
        winter: '冬招',
        spring: '春招',
        holiday: '节假日',
        other: '其他',
      },
      loading: false,
      //海报弹窗
      posterVisible: false,
      postUrl: null,
      postDownload: null,
      // vx二维码弹窗
      wxCodeVisible: false,
      wxQrcode: null,
      parentVisible: false,
      switchStatus: true,
      parend_can_see_id: null, //家长端可见 修改时用的模板ID
      parentVisibleModelLoading: false,
      lookImgUrl: require('@/assets/img/parentpreview.png'),
      NoLookImgUrl: require('@/assets/img/parentlook.png'),
      value: [],
      nowPage: 1,
      pageData: null,
      page: null,
      pageSize: null,
      hostUrl: null,
      nowDay: null, //今天的时间戳
    }
  },
  created() {
    if(process.env.NODE_ENV === "development"){
      this.hostUrl='http://192.168.3.147:8080'
    }else{
      let ishttps = 'https:' == document.location.protocol ? true : false
      if (ishttps) {
        this.hostUrl = 'https://' + window.location.host
      } else {
        this.hostUrl = 'http://' + window.location.host
      }
    }
    this.nowDay = moment().valueOf() / 1000
    this.reload()
  },

  methods: {
    moment,
    jump(data){
      if(data.cate=='vote'){
        this.$message.warning('努力开发中，敬请期待！')
      }else{
        this.$router.push({name:'dataCount',query:{activityID:data.id}})
      }
    },
    //复制二维码链接
    copy1() {
      let clipboard = new Clipboard('.btn_1')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        clipboard.destroy()
      })
    },
    reload(page = 1, pagesize = 10) {
      this.loading = true
      activityList({ school_id: this.$store.state.user.school, pageNo: page, pageSize: pagesize })
        .then((res) => {
          let params = JSON.parse(JSON.stringify(res.data))
          params.forEach((val) => {
            // console.log(val.end_time)
            let timeSupplement = val.end_time+':00'
            let time = moment(timeSupplement).valueOf()
            val.isEnd = time/1000
            console.log(val.isEnd,'----',this.nowDay)
            let pageUrl =
              val.template.cate == 'lottery'
                ? '/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid='
                : val.template.cate == 'vote'
                ? '/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid='
                : '/h5/#/pagesRecruit/templates/templates?sid='
            if (val.is_release == 1) {
              //参与
              val.qrUrl =
                this.hostUrl +
                pageUrl +
                this.$store.state.user.school +
                `&type=` +
                val.template.cate +
                `&tid=` +
                val.template_id +
                `&operation=show` +
                `&id=` +
                val.id
            } else {
              //预览
              val.qrUrl =
                this.hostUrl +
                pageUrl +
                this.$store.state.user.school +
                `&type=` +
                val.template.cate +
                `&tid=` +
                val.template_id +
                `&operation=prev` +
                `&id=` +
                val.id
            }
          })
          this.value = params
          this.pageData = res.meta
        })
        .finally(() => {
          this.loading = false
        })
    },
    changePage(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.reload(page, pageSize)
    },
    parentCancel() {
      this.parentVisible = false
    },
    publishOrDel(data, type) {
      let that = this
      if (type == 'publish') {
        this.$confirm({
          title: '温馨提醒',
          content: '确定发布活动吗?',
          onOk() {
            publishActivity(
              // {
              //   qrcode: data.qrUrl,
              // },
              data.id
            )
              .then((res) => {
                that.$message.success('发布成功')
                that.reload(that.page, that.pageSize)
              })
              .catch((err) => {
                that.$message.error(err.data.message || '发布失败')
              })
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      } else if (type == 'del') {
        this.$confirm({
          title: '警告',
          content: '确定要删除该活动吗?',
          onOk() {
            delActivity(data.id)
              .then((res) => {
                that.$message.success('删除成功')
                that.reload(that.page, that.pageSize)
              })
              .catch((err) => {
                that.$message.error(err.data.message || '删除失败')
              })
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      }
    },
    showParentVisible(data) {
      this.switchStatus = data.parent_can_see == 1 ? true : false
      this.parend_can_see_id = data.id
      this.parentVisible = true
    },
    showPosterVisible(data) {
      this.loading = true
      getPoster({ flag: true }, data.id)
        .then((res) => {
          if (res.poster && res.poster.url) {
            this.postUrl = res.poster.url
            this.posterVisible = true
          } else {
            this.$message.error('该活动暂未设置海报')
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    showWxCodeVisible(data) {
      if (data) {
        let pageUrl =
          data.template.cate == 'lottery'
            ? '/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid='
            : data.template.cate == 'vote'
            ? '/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid='
            : '/h5/#/pagesRecruit/templates/templates?sid='
        if (data.is_release == 1) {
          //参与
          this.wxQrcode =
            this.hostUrl +
            pageUrl +
            this.$store.state.user.school +
            `&type=` +
            data.template.cate +
            `&tid=` +
            data.template_id +
            `&operation=show` +
            `&id=` +
            data.id
          this.wxCodeVisible = true
        } else {
          //编辑
          this.wxQrcode =
            this.hostUrl +
            pageUrl +
            this.$store.state.user.school +
            `&type=` +
            data.template.cate +
            `&tid=` +
            data.template_id +
            `&operation=edit` +
            `&id=` +
            data.id
          this.wxCodeVisible = true
        }
        console.log(data, this.wxQrcode)
      } else {
        this.$message.warning('该活动未设置微信二维码')
      }
    },
    changeParendCanSee(data) {
      this.parentVisibleModelLoading = true
      parentCanSee({ parent_can_see: data == true ? 1 : 2 }, this.parend_can_see_id)
        .then((res) => {
          this.reload(this.page, this.pageSize)
          this.$message.success('切换状态成功')
        })
        .catch((err) => {
          this.switchStatus = !data
          this.$message.error('切换状态失败')
        })
        .finally(() => {
          this.parentVisibleModelLoading = false
        })
    },
    editActivity(data) {
      let params = {
        cate: data.template.cate,
        id: data.template_id,
        activityID: data.id,
        title: data.other.template_name,
      }
      this.$emit('edit', params)
    },
    //报名弹窗事件↓
    showSignUpVisible(data) {
      this.$nextTick(() => {
        this.$refs.signUp.showSignUpTable(data)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.modalTop {
  width: 100%;
  height: 52px;
  // border-bottom: 1px solid #e8e8e8;
  padding: 10px 16px;
}
.modalContent {
  padding: 10px 16px;
}
.list {
  .item {
    display: flex;
    height: 162px;
    border-radius: 6px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    .item-left {
      width: 162px;
      .cover {
        position: relative;
        cursor: pointer;
        img {
          width: 162px;
          height: 162px;
          border-radius: 6px 0 0 6px;
        }
        .edit {
          position: absolute;
          top: 0;
          left: 0;
          width: 162px;
          height: 162px;
          border-radius: 6px 0 0 6px;
          background: rgba(0, 0, 0, 0.7);
          display: none;
          img {
            width: 112px;
            height: 112px;
            padding: 6px;
            border-radius: 0;
            background-color: #fff;
          }
          .qrcode {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .item-left:hover {
      .cover {
        .edit {
          display: block;
        }
      }
    }
    .item-right {
      flex: 1;
      padding: 16px 25px 24px 20px;
      // display: flex;
      .detail {
        display: flex;
        justify-content: space-between;
        .title {
          .text {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            width: 484px;
            max-width: 484px;
            margin-left: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .operate {
          .ml16 {
            margin-left: 16px;
            font-size: 16px;
            cursor: pointer;
            color: #bfbfbf;
          }
        }
      }
      .tags {
        margin-top: 8px;
        span {
          font-size: 14px;
          color: #999;
          margin-right: 16px;
        }
      }
      .part-two {
        margin-top: 20px;
        display: flex;
        .time {
          width: 400px;
          height: 50px;
          line-height: 20px;
          font-size: 14px;
          color: #999;
          div:last-child {
            margin-top: 8px;
          }
        }
        .data {
          height: 50px;
          flex: 1;
          display: flex;
          justify-content: space-around;
          .line {
            width: 2px;
            height: 50px;
            background-color: #e8e8e8;
          }
          .data-item {
            text-align: center;
            box-sizing: border-box;
            .number {
              font-size: 18px;
              color: #999;
            }
            .label {
              margin-top: 5px;
              color: #999;
            }
          }
          .signUpBtn {
            cursor: pointer;
            .number {
              color: #ff8534;
            }
          }
        }
      }
    }
  }
}
.box-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent-box {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  .parent-left {
    flex: 1;
  }
  .parent-right {
    flex: 1;
    margin: 20px 0 0 50px;
    box-sizing: border-box;
  }
}
// .btn_1{
//   width:100%;
//   height: 100%;
//   position: absolute;
//   top: 0;
// }
</style>